<template>
  <div class="menu-container">
    <!-- 过滤条件 -->
    <el-form label-width="80px">
      <el-form-item label="类别：">
        <el-radio-group size="mini" v-model="form.gender" @change="genderChange">
          <el-radio-button :label="item.value" v-for="(item, index) in gender" :key="index">{{item.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="分类：">
        <el-radio-group size="mini" v-model="form.major" @change="majorChange">
          <el-radio-button :label="item.major" v-for="(item, index) in major" :key="index"></el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="子类：" v-show="minor.length">
        <el-radio-group size="mini" v-model="form.minor" @change="minorChange">
          <el-radio-button :label="item.value" v-for="(item, index) in minor" :key="index">{{item.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {gender, type} from './const/index'
import {api} from './api'

export default {
  data () {
    return {
      gender: gender,
      type: type,
      form: {
        gender: '',
        type: 'hot',
        major: '',
        minor: ''
      },
      bookData: []
    }
  },
  computed: {
    major () {
      const data = this.gender.filter(item => {
        return item.value === this.form.gender
      })
      return !data.length ? data : data[0].children
    },
    minor () {
      let data = this.gender.filter(item => {
        return item.value === this.form.gender
      })
      if (data.length) {
        data = data[0].children.filter(item => {
          return item.major === this.form.major
        })
        if (data.length) {
          data = data[0].mins.map(item => {
            return {
              label: item,
              value: item
            }
          })
        }
      }
      return !data.length ? data : [{
        label: '全部',
        value: ''
      }].concat(data)
    }
  },
  mounted () {
    this.$fetch(api.category).then(res => {
      this.gender.map(item => {
        item.children = res[item.value]
      })
      this.formInit()
      this.conditionalChange()
    })
  },
  methods: {
    /*
     *@Description: 过滤条件默认赋值
     *@Author:  lupan
     *@Date: 2019-06-30 00:52:42
    */
    formInit () {
      this.form.gender = this.gender[0].value
      this.form.major = this.gender[0].children[0].major
    },
    genderChange (el) {
      let data = this.gender.filter(item => {
        return item.value === el
      })
      this.form.major = data[0].children[0].major
      this.form.minor = ''
      setTimeout(() => {
        this.conditionalChange()
      })
    },
    majorChange (el) {
      this.form.minor = ''
      setTimeout(() => {
        this.conditionalChange()
      })
    },
    minorChange () {
      setTimeout(() => {
        this.conditionalChange()
      })
    },
    conditionalChange () {
      this.$emit('conditionalChange', this.form)
    }
  }
}
</script>

<style lang="scss">
  .menu-container {
    width: 1200px;
    padding: 20px;
    border: 1px solid #f5d3c6;
    margin: 0 auto;
    margin-bottom: 50px;
  }
</style>
